<template>
    <div class="AreaTooltip_container">
        <div class="tooltip">
            <div class="tooltip_title">高后果区信息<span class="closeBtn" @click.stop="closeBtn">&times;</span></div>
            <div class="tooltip_content">
                <div class="tooltip_row">
                    <div class="tooltip_item tooltip_name1">高后果区名称</div>
                    <div class="tooltip_itemwidth">{{tipData.consequenceName}} &nbsp;&nbsp;&nbsp;</div>
                </div>
				<div class="tooltip_row">
				    <div class="tooltip_item tooltip_name2">管道名称</div>
				    <div class="tooltip_itemwidth">{{tipData.ppName}}</div>
				</div>
                <div class="tooltip_row">
                    <div class="tooltip_item tooltip_name1">接收单位</div>
                    <div class="tooltip_itemwidth">{{tipData.responsibleUnitName}}</div>
                </div>
				<div class="tooltip_row">
				    <div class="tooltip_item tooltip_name1">高后果区长度</div>
				    <div class="tooltip_item">{{tipData.consequenceLength}}</div>
				    <div class="tooltip_item tooltip_name2">等级</div>
				    <div class="tooltip_item">{{tipData.consequenceLevelDesc}}</div>
				</div>
				<div class="tooltip_row">
				    <div class="tooltip_item tooltip_name1">高后果区类型</div>
				    <div class="tooltip_item">{{tipData.consequenceTypeDesc}}</div>
				    <div class="tooltip_item tooltip_name2">责任人</div>
				    <div class="tooltip_item">{{tipData.liable}}</div>
				</div>
				<div class="tooltip_row">
				    <div class="tooltip_item tooltip_name1">报备时间</div>
				    <div class="tooltip_itemwidth">{{tipData.discriminateDate}}</div>
				</div>
               
            </div>
            <div class="tooltip_bottom">
                <div class="tooltip_button" style="width: 150px"  @click.stop="selectCamera">
					<span class="el-dropdown-link" >
					    <svg width="13"
					         height="12"
					         viewBox="0 0 13 12"
					         fill="none"
					         xmlns="http://www.w3.org/2000/svg">
					        <path d="M5.68025 2.18254L3.75924 0H1.58153L3.50255 2.18254H5.68025ZM11.3357 2.18254L9.41465 0H7.23694L9.15796 2.18254H11.3357ZM8.50382 2.18254L6.5828 0H4.4051L6.32611 2.18254H8.50382ZM12.1554 0H10.0605L11.9815 2.18254H13V0.815456C13 0.351765 12.6357 0 12.1554 0ZM0.935669 0H0.852866C0.372611 0 0.00827965 0.351765 0.00827965 0.815456V2.18254H2.86497L0.935669 0ZM0 11.1845C0 11.6482 0.364331 12 0.844586 12H12.1471C12.6274 12 12.9917 11.6482 12.9917 11.1845V2.72618H0V11.1845ZM4.52102 5.18055C4.52102 4.71686 4.91847 4.501 5.3656 4.501C5.50637 4.501 5.68025 4.52498 5.82102 4.61292L9.04204 6.41173C9.60509 6.71552 9.60509 7.47502 9.04204 7.77881L5.82102 9.57761C5.68025 9.65756 5.53949 9.68954 5.3656 9.68954C4.91019 9.68954 4.52102 9.47368 4.52102 9.00999V5.18055Z"
					              fill="white" />
					    </svg>
					    视频监控<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
                    <!-- <el-dropdown @command="selectCamera">
                        <span class="el-dropdown-link">
                            <svg width="13"
                                 height="12"
                                 viewBox="0 0 13 12"
                                 fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.68025 2.18254L3.75924 0H1.58153L3.50255 2.18254H5.68025ZM11.3357 2.18254L9.41465 0H7.23694L9.15796 2.18254H11.3357ZM8.50382 2.18254L6.5828 0H4.4051L6.32611 2.18254H8.50382ZM12.1554 0H10.0605L11.9815 2.18254H13V0.815456C13 0.351765 12.6357 0 12.1554 0ZM0.935669 0H0.852866C0.372611 0 0.00827965 0.351765 0.00827965 0.815456V2.18254H2.86497L0.935669 0ZM0 11.1845C0 11.6482 0.364331 12 0.844586 12H12.1471C12.6274 12 12.9917 11.6482 12.9917 11.1845V2.72618H0V11.1845ZM4.52102 5.18055C4.52102 4.71686 4.91847 4.501 5.3656 4.501C5.50637 4.501 5.68025 4.52498 5.82102 4.61292L9.04204 6.41173C9.60509 6.71552 9.60509 7.47502 9.04204 7.77881L5.82102 9.57761C5.68025 9.65756 5.53949 9.68954 5.3656 9.68954C4.91019 9.68954 4.52102 9.47368 4.52102 9.00999V5.18055Z"
                                      fill="white" />
                            </svg>
                            视频监控<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                             <el-dropdown-item
                                 v-for="(monitor, index) in tipData.consequenceMonitorList"
                                 v-text="monitor.cameraName"
                                 :command="monitor"
                                 :key="index">
                             </el-dropdown-item>
                         </el-dropdown-menu>
                   </el-dropdown> -->
                </div>
                <div class="tooltip_button"
                     style="width: 150px"
                     @click.stop="flyTo">
                    <div class="tooltip_icon">
                        <svg width="12"
                             height="12"
                             viewBox="0 0 12 12"
                             fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 0V12H12V0H0ZM5.37 5.7975H1.35V1.3725H10.635V10.65H6.24V6.6525L5.37 5.7975ZM1.35 10.65V7.1475H4.89V10.65H1.35Z"
                                  fill="white" />
                        </svg>
                    </div>
                    缩放该区域
                </div>
               
            </div>
        </div>
    </div>
</template>

<script>
    import { mapMutations } from 'vuex';
    import axios from 'axios';
    export default {
        name: 'AreaTooltip',
        props: {
            tipData: {
                type: Object
            }
        },
        methods: {
            closeBtn() {
                this.$emit('closeGHG');
            },
            flyTo() {
                this.$emit('flyToGHG');
            },
            selectCamera() {
				this.$emit('selectcamera');
				//bus.$emit('selectCamera', {cameraIndex: command.cameraCode, cameraName: command.cameraName});
            }
        }
    };
</script>

<style scoped>
    .el-dropdown-menu >>> .el-dropdown-menu__item {
        color: #ffffff !important;
        font-size: 16px !important;
    }
    .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
        background-color: transparent !important;
        color: #ffffff !important;
    }
</style>
<style lang="scss" scoped>
    //@import '../assets/css/global-style/index.scss';
    .AreaTooltip_container {
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -105%);
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 8px;
        padding: 16px 20px;
        background: rgba(10, 74, 121, 0.5);
        border: 2px solid rgba(0, 117, 255, 0.2);
z-index: 999;
        .tooltip {
            width: 600px;
            cursor: default;
            border-radius: 4px;
            .tooltip_title {
                height: 40px;
                line-height: 40px;
                display: flex;
                align-items: center;
                text-align: center;
                padding-left: 16px;
                font-size: 24px;
                color: #fff;
                background: linear-gradient(90deg, #0075FF 0%, rgba(0, 117, 255, 0) 100%);
                position: relative;

                .closeBtn {
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    border: 2px solid #ffffff;
                    position: absolute;
                    right: 10px;
                    line-height: 24px;
                    cursor: pointer;
                }
            }
            .tooltip_content {
                padding: 4px 16px;
                margin: 6px 0;
                background: rgba(3, 60, 102, 0.5);
                border: 2px solid rgba(255, 255, 255, 0.2);
            }
            .tooltip_row {
                display: flex;
                justify-content: center;
                align-items: baseline;
                padding: 6px 0;
            }
            .tooltip_item {
                padding: 0 25px;
                font-size: 15px;
                color: #fff;
                width: 180px;
                word-break: break-all;
				margin-right: 5px;
            }
			.tooltip_itemwidth {
			    padding: 0 4px;
			    font-size: 15px;
			    color: #fff;
			    width: 100%;
			    word-break: break-all;
				margin-right: 5px;
				
			}
            .tooltip_name1 {
                text-align-last: justify;
                width: 200px !important;
                position: relative;
				color: #4BDDFD;
            }
            .tooltip_name1:before {
                content: ' ';
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background-color: #4BDDFD;
                position: absolute;
                left: -10px;
                top: 6px;
            }
            .tooltip_name2 {
                text-align-last: justify;
                width: 130px !important;
                position: relative;
				color: #4BDDFD;
            }
            .tooltip_name2:before {
                content: ' ';
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background-color: #4BDDFD;
                position: absolute;
                left: -10px;
                top: 6px;
            }
            .tooltip_bottom {
                height: 40px;
                padding: 4px;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            .tooltip_button {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 36px;
                line-height: 36px;
                font-size: 18px;
                margin-left: 4px;
                margin-right: 4px;
                color: #fff;
                cursor: pointer;
                background: rgba(37, 139, 233, 0.5);
                border: 2px solid #258BE9;
                border-radius: 2px;
                padding: 6px 15px;

                .el-dropdown-link {
                    color: #ffffff !important;
                    font-size: 18px !important;
                }
            }
            .tooltip_icon {
                margin-right: 4px;
                display: flex;
            }
        }
    }
</style>